<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inspiration for Pricing Tables</title>
    <meta name="description" content="Various styles and inspiration for responsive, flexbox-based HTML pricing tables" />
    <meta name="keywords" content="pricing table, inspiration, ui, modern, responsive, flexbox, html, component" />
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Sahitya:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:900' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <!--[if IE]>
  		<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
    <div class="container">
        <header class="codrops-header">
            <h1><span>Inspiration for</span> Pricing Tables</h1>
        </header>
        <section class="pricing-section">
            <p class="intro">Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities.
                <br />
                <br /><strong>Let's explore some today.</strong></p>
        </section>
        <section class="pricing-section bg-1">
            <h2 class="pricing-section__title">Sonam</h2>
            <div class="pricing pricing--sonam">
                <div class="pricing__item">
                    <h3 class="pricing__title">Startup</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>9.90</div>
                    <p class="pricing__sentence">Small business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">40MB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Standard</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29,90</div>
                    <p class="pricing__sentence">Medium business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">10 hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">1GB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Professional</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>59,90</div>
                    <p class="pricing__sentence">Gigantic business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">Unlimited hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">Anaylitcs integration</li>
                        <li class="pricing__feature">Unlimited storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-3">
            <h2 class="pricing-section__title">Jinpa</h2>
            <div class="pricing pricing--jinpa">
                <div class="pricing__item">
                    <h3 class="pricing__title">Startup</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>9.90</div>
                    <p class="pricing__sentence">Small business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">40MB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Medium</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29,90</div>
                    <p class="pricing__sentence">Medium business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">10 hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">1GB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Large</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>59,90</div>
                    <p class="pricing__sentence">Gigantic business solution</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">Unlimited hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">Anaylitcs integration</li>
                        <li class="pricing__feature">Unlimited storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-11">
            <h2 class="pricing-section__title">Tenzin</h2>
            <div class="pricing pricing--tenzin">
                <div class="pricing__item">
                    <h3 class="pricing__title">Freelancer</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>9.90</div>
                    <p class="pricing__sentence">Perfect for single freelancers who work by themselves</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Support forum</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">40MB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Small business</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29,90</div>
                    <p class="pricing__sentence">Suitable for small businesses with up to 5 employees</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">10 hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">1GB of storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Larger business</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>59,90</div>
                    <p class="pricing__sentence">Great for large businesses with more than 5 employees</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited calls</li>
                        <li class="pricing__feature">Free hosting</li>
                        <li class="pricing__feature">Unlimited hours of support</li>
                        <li class="pricing__feature">Social media integration</li>
                        <li class="pricing__feature">Anaylitcs integration</li>
                        <li class="pricing__feature">Unlimited storage space</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-5">
            <h2 class="pricing-section__title">Yama</h2>
            <div class="pricing pricing--yama">
                <div class="pricing__item">
                    <h3 class="pricing__title">Cafés <span class="pricing__amp">&amp;</span> Nightclubs</h3>
                    <p class="pricing__sentence">Perfect for a café or bar</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>199<span class="pricing__period">/month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Up to 5 employees</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                        <li class="pricing__feature">Small social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Diners <span class="pricing__amp">&amp;</span> Restaurants</h3>
                    <p class="pricing__sentence">Great for restaurant owners</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>350<span class="pricing__period">/month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Up to 15 employees</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">BBs <span class="pricing__amp">&amp;</span> Pensions</h3>
                    <p class="pricing__sentence">Suitable for BBs and Pensions</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>899<span class="pricing__period">/month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited employees</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-10">
            <h2 class="pricing-section__title">Rabten</h2>
            <div class="pricing pricing--rabten">
                <div class="pricing__item">
                    <div class="icon icon--home"></div>
                    <h3 class="pricing__title">Individuals</h3>
                    <p class="pricing__sentence">Single user license</p>
                    <div class="pricing__price">
                        <span class="pricing__anim pricing__anim--1">
								<span class="pricing__currency">$</span>9
                        </span>
                        <span class="pricing__anim pricing__anim--2">
								<span class="pricing__period">per year</span>
                        </span>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">1 GB of space</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                        <li class="pricing__feature">Small social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <div class="icon icon--store"></div>
                    <h3 class="pricing__title">Small Team</h3>
                    <p class="pricing__sentence">Up to 5 users</p>
                    <div class="pricing__price">
                        <span class="pricing__anim pricing__anim--1">
								<span class="pricing__currency">$</span>79
                        </span>
                        <span class="pricing__anim pricing__anim--2">
								<span class="pricing__period">per year</span>
                        </span>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">5 GB of space</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <div class="icon icon--apartment"></div>
                    <h3 class="pricing__title">Organization</h3>
                    <p class="pricing__sentence">Unlimited users</p>
                    <div class="pricing__price">
                        <span class="pricing__anim pricing__anim--1">
								<span class="pricing__currency">$</span>499
                        </span>
                        <span class="pricing__anim pricing__anim--2">
								<span class="pricing__period">per year</span>
                        </span>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited space</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-6">
            <h2 class="pricing-section__title">Pema</h2>
            <div class="pricing pricing--pema">
                <div class="pricing__item">
                    <h3 class="pricing__title">Basic</h3>
                    <p class="pricing__sentence">For freelancers</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>19<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature"><span class="icon icon--chart-bars"></span>10 presentations/month</li>
                        <li class="pricing__feature"><span class="icon icon--bubble"></span>Support at $25/hour</li>
                        <li class="pricing__feature"><span class="icon icon--rocket"></span>1 campaign/month</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item pricing__item--featured">
                    <h3 class="pricing__title">Standard</h3>
                    <p class="pricing__sentence">For medium sized teams</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature"><span class="icon icon--chart-bars"></span>50 presentations/month</li>
                        <li class="pricing__feature"><span class="icon icon--bubble"></span>5 hours of free support</li>
                        <li class="pricing__feature"><span class="icon icon--rocket"></span>10 campaigns/month</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Enterprise</h3>
                    <p class="pricing__sentence">For large companies</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>79<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature"><span class="icon icon--chart-bars"></span>Unlimited presentations</li>
                        <li class="pricing__feature"><span class="icon icon--bubble"></span>Unlimited support</li>
                        <li class="pricing__feature"><span class="icon icon--rocket"></span>Unlimited campaigns</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-9">
            <h2 class="pricing-section__title">Karma</h2>
            <div class="pricing pricing--karma">
                <div class="pricing__item">
                    <h3 class="pricing__title">Basic</h3>
                    <p class="pricing__sentence">For freelancers</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>19<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">1 GB of space</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                        <li class="pricing__feature">Small social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item pricing__item--featured">
                    <h3 class="pricing__title">Standard</h3>
                    <p class="pricing__sentence">For medium sized teams</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">5 GB of space</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Enterprise</h3>
                    <p class="pricing__sentence">For large companies</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>79<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited space</li>
                        <li class="pricing__feature">Free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
            <p>Inspired by <strong><a href="https://frankbody.com/">Frank Body</a></strong></p>
            <p><strong><a href="http://www.freepik.com/free-photos-vectors/vintage">Vintage vector</a></strong> designed by Vilmosv - Freepik.com</p>
        </section>
        <section class="pricing-section bg-7">
            <h2 class="pricing-section__title">Norbu</h2>
            <div class="pricing pricing--norbu">
                <div class="pricing__item">
                    <h3 class="pricing__title">Beginner Savers</h3>
                    <p class="pricing__sentence">For people who are starting out in the water saving business</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>19<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Free water saving e-book</li>
                        <li class="pricing__feature">Free access to forums</li>
                        <li class="pricing__feature">Beginners tips</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item pricing__item--featured">
                    <h3 class="pricing__title">Advanced Savers</h3>
                    <p class="pricing__sentence">For experienced water savers who'd like to push their limits</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Free water saving e-book</li>
                        <li class="pricing__feature">Free access to forums</li>
                        <li class="pricing__feature">Advanced saving tips</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Pro Savers</h3>
                    <p class="pricing__sentence">For all the professionals who'd like to educate others, too</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>79<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Access to all books</li>
                        <li class="pricing__feature">Unlimited board topics</li>
                        <li class="pricing__feature">Beginners tips</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-2">
            <h2 class="pricing-section__title">Dawa</h2>
            <div class="pricing pricing--dawa">
                <div class="pricing__item">
                    <h3 class="pricing__title">Amateur</h3>
                    <p class="pricing__sentence">For complete newbies</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>9<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">2 free lessons</li>
                        <li class="pricing__feature">Free forum access</li>
                        <li class="pricing__feature">Crowd coaching</li>
                    </ul>
                    <button class="pricing__action">Sign up</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Student</h3>
                    <p class="pricing__sentence">For the aspiring chefs</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">10 free lessons</li>
                        <li class="pricing__feature">Free forum access</li>
                        <li class="pricing__feature">Private coach</li>
                    </ul>
                    <button class="pricing__action">Sign up</button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Chef</h3>
                    <p class="pricing__sentence">For professional chefs</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>79<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited free lessons</li>
                        <li class="pricing__feature">Free forum access</li>
                        <li class="pricing__feature">Private coaches</li>
                    </ul>
                    <button class="pricing__action">Sign up</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-4">
            <h2 class="pricing-section__title">Yonten</h2>
            <div class="pricing pricing--yonten">
                <div class="pricing__item">
                    <div class="icon icon--bicycle"></div>
                    <h3 class="pricing__title">Beginner</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>9<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">1 GB of space</li>
                        <li class="pricing__feature">Unlimited traffic</li>
                        <li class="pricing__feature">Forum access</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <div class="icon icon--bus"></div>
                    <h3 class="pricing__title">Advanced</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>259<span class="pricing__period">/ year</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">5 GB of space</li>
                        <li class="pricing__feature">Unlimited traffic</li>
                        <li class="pricing__feature">Forum access</li>
                        <li class="pricing__feature">Support at $5/hour</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <div class="icon icon--train"></div>
                    <h3 class="pricing__title">Professional</h3>
                    <div class="pricing__price"><span class="pricing__currency">$</span>699<span class="pricing__period">/ year</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">20 GB of space</li>
                        <li class="pricing__feature">Unlimited traffic</li>
                        <li class="pricing__feature">Forum access</li>
                        <li class="pricing__feature">Free support</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-8">
            <h2 class="pricing-section__title">Tashi</h2>
            <div class="pricing pricing--tashi">
                <div class="pricing__item">
                    <h3 class="pricing__title">Startup</h3>
                    <p class="pricing__sentence">Perfect for small startups that have less than 10 team members</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>19<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">1 GB of space</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                        <li class="pricing__feature">Small social media package</li>
                    </ul>
                    <button class="pricing__action" aria-label="Purchase this plan"><span class="icon icon--arrow-right"></span></button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Medium</h3>
                    <p class="pricing__sentence">Suitable for medium-sized businesses with up to 30 employees</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>199<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">5 GB of space</li>
                        <li class="pricing__feature">Support at $5/hour</li>
                        <li class="pricing__feature">Medium social media package</li>
                    </ul>
                    <button class="pricing__action" aria-label="Purchase this plan"><span class="icon icon--arrow-right"></span></button>
                </div>
                <div class="pricing__item">
                    <h3 class="pricing__title">Pro</h3>
                    <p class="pricing__sentence">For any large corporation with an unlimited number of members</p>
                    <div class="pricing__price"><span class="pricing__currency">$</span>499<span class="pricing__period">/ month</span></div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">Unlimited space</li>
                        <li class="pricing__feature">20 hours of free support</li>
                        <li class="pricing__feature">Full social media package</li>
                    </ul>
                    <button class="pricing__action" aria-label="Purchase this plan"><span class="icon icon--arrow-right"></span></button>
                </div>
            </div>
        </section>
        <section class="pricing-section bg-12">
            <h2 class="pricing-section__title">Palden</h2>
            <div class="pricing pricing--palden">
                <div class="pricing__item">
                    <div class="pricing__deco">
                        <svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">
                            <path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                            <path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                            <path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" />
                            <path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                        </svg>
                        <div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ mo</span></div>
                        <h3 class="pricing__title">Freelance</h3>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">1 GB of space</li>
                        <li class="pricing__feature">Support at $25/hour</li>
                        <li class="pricing__feature">Limited cloud access</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item pricing__item--featured">
                    <div class="pricing__deco">
                        <svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">
                            <path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                            <path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                            <path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" />
                            <path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                        </svg>
                        <div class="pricing__price"><span class="pricing__currency">$</span>59<span class="pricing__period">/ mo</span></div>
                        <h3 class="pricing__title">Business</h3>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">5 GB of space</li>
                        <li class="pricing__feature">Support at $5/hour</li>
                        <li class="pricing__feature">Full cloud access</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
                <div class="pricing__item">
                    <div class="pricing__deco">
                        <svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">
                            <path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                            <path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                            <path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z" />
                            <path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                        </svg>
                        <div class="pricing__price"><span class="pricing__currency">$</span>99<span class="pricing__period">/ mo</span></div>
                        <h3 class="pricing__title">Enterprise</h3>
                    </div>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">10 GB of space</li>
                        <li class="pricing__feature">Support at $5/hour</li>
                        <li class="pricing__feature">Full cloud access</li>
                    </ul>
                    <button class="pricing__action">Choose plan</button>
                </div>
            </div>
        </section>

    </div>
    <!-- /container -->
</body>

</html>
